<template>
	<view>
		<view class="userinfo">
			<image :src="userInfo.miniAvatar" @tap="previewImg(userInfo.miniAvatar)" class="img"></image>
			<view class="userinfo-desc">
				<view style="display: flex;">
					<view class="userinfo-desc-name">{{userInfo.nickname}}</view>
					<view class="ichat ichatman" v-show="userInfo.sex == 1" style="font-size: 34rpx;margin-left: 10rpx;padding-top: 2rpx"></view>
					<view class="ichat ichatnv" v-show="userInfo.sex == 2" style="font-size: 30rpx;margin-left: 10rpx;padding-top: 2rpx"></view>
				</view>
				<view class="userinfo-desc-gray">地区：{{userInfo.area}}</view>
			</view>
		</view>
		<view  class="perch"></view>
		<u-cell-group >
			<u-cell-item title="个性签名" :value="userInfo.signature" :arrow=false hover-class="none" :title-style="{ marginLeft: '10rpx', width: '150rpx' }" :value-style="{ marginLeft: '150rpx',position: 'absolute' }"></u-cell-item>
			<u-cell-item title="来源" value="来自账号搜索" :arrow=false hover-class="none" :title-style="{ marginLeft: '10rpx', width: '150rpx' }" :value-style="{ marginLeft: '150rpx',position: 'absolute' }"></u-cell-item>
		</u-cell-group>
		<view class="" v-if="!isItMe">
			<view  class="perch"></view>
			<u-cell-group >
				<u-cell-item v-show="userInfo.isFriend == 0" title="添加到通讯录" :arrow="false" :center="true" :title-style="{ textAlign: 'center', color: '#3e76a1', width:'100%' }" @click="add"></u-cell-item>
				<u-cell-item v-show="userInfo.isFriend == 3" title="前往验证" :arrow="false" :center="true" :title-style="{ textAlign: 'center', color: '#3e76a1', width:'100%' }" @click="agreeFriend"></u-cell-item>
				<u-cell-item v-show="userInfo.isFriend == 2" title="等待对方验证" :arrow="false" :center="true" :title-style="{ textAlign: 'center', color: '#999', width:'100%' }"></u-cell-item>
				<u-cell-item v-show="userInfo.isFriend == 1" title="发消息" :arrow="false" :center="true" :title-style="{ textAlign: 'center', color: '#3e76a1', width:'100%' }"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{},
				isItMe:false,
			}
		},
		methods: {
			previewImg(urls){
				uni.previewImage({urls:[urls]})
			},
			add() {
				//跳转申请页面
				this.$u.route('pages/addFriendApply/addFriendApply', {
					fid: this.userInfo.id,
					nickname: this.userInfo.nickname,
				});
			},
			//跳转至验证界面
			agreeFriend () {
				this.$u.route('pages/agreeFriendApply/agreeFriendApply', {
					other_id: this.userInfo.id,
					nickname: this.userInfo.nickname,
				});
			}
		},
		onLoad(option) {
			this.userInfo = {
				id: option.id,
				miniAvatar: option.miniAvatar,
				nickname: option.nickname,
				area: option.area,
				signature: option.signature,
				isFriend: option.isFriend,
				sex: option.sex,
				source: option.source,
			};
		}
	}
</script>

<style scoped lang="scss">
	.perch{
		height: 10rpx;
	}
.userinfo{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 20rpx 30rpx 40rpx 40rpx;
	background-color: #FFFFFF;
	.img{
		display: block;
		width: 110rpx;
		height: 110rpx;
		border-radius: 10rpx;
	}
	&-desc{
		padding-left: 30rpx;
		&-name{
			font-weight: bold;
			font-size: 36rpx;
			transform: translateY(-10rpx);
		}
		&-gray{
			color: $u-tips-color;
			font-size: 29rpx;
		}
	}
}
</style>
